<template>
    <div class="products-tag-select-drawer">
        <div class="check-tab" :class="multiple ? '' : 'not-multiple'" @click="showDrawer">
            <div v-show="selectTagList.length" style="width: 100%; display: flex; flex-wrap: wrap;">
                <Tag 
                    color="default" 
                    v-for="item in selectTagList" 
                    :key="item.id" 
                    closable 
                    @click.stop
                    @on-close="removeTag([], item)">{{item.name}}</Tag>
            </div>
            <span v-show="!selectTagList.length" class="placeholder">{{ placeholder }}</span>
        </div>
        <Icon type="ios-add-circle-outline" class="add-icon" @click.native="showDrawer" />
        <Drawer 
            :width="width"
            v-model="drawer.show" 
            :transfer="transfer"
            :inner="inner"
            title="选择分类标签"
            class="device-drawer">
            <div class="tag-group">
                <assetTypeComponent allowCheck disabledAction :tagList="selectTagList" 
                    ref="assetTypeComponent" @change-tag="list => selectTagList = list"></assetTypeComponent>
            </div>
        </Drawer>
    </div>
</template>

<script>
import AssetTypeComponent from '@/view/testPlatform/asset/assetTypeComponent.vue'

export default {
    name: 'ProductsTagSelectDrawer',
    components: {
        AssetTypeComponent
    },
    props: {
        value: [String, Array],
        multiple: {
            type: Boolean,
            default: true
        },
        width: {
            type: Number,
            default: 60
        },
        inner: {
            type: Boolean,
            default: false
        },
        transfer: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type : String,
            default: ''
        }
    },
    data() {
        return {
            selectTagList: [],
            height: 200,
            drawer: {
                show: false
            },
        }
    },
    mounted() {
    },
    beforeDestroy() {
    },
    watch: {
        value(newValue, oldValue) {
            // 值可能是字符串，也可能是数组，需要强转对比，内容无变化时不做处理
            if (String(newValue) === String(oldValue) && newValue.length === oldValue.length) {
                return
            }
        },
        selectTagList(list) {
            this.$nextTick(() => {
                if (this.isclear) { // 清空选项由父组件触发，不需要向外发送数据，避免触发了校验
                    this.isclear = false
                    return
                }
                this.$emit('input', list.map(item => item.id))
            })
        }
    },
    methods: {
        // 获取当前选中项的信息，多选时返回对象数组，单选时返回对象
        getSelectedValue() {
            if (this.selectTagList && this.selectTagList.length) {
                return this.selectTagList
            } else {
                return null
            }
        },
        // 清空选中的数据
        clear() {
            this.selectTagList = []
            this.isclear = true
        },
        // 选中数据
        selectTag(selection, row) {
            if (!row) { // 全选操作
                let checkIds = this.selectTagList.map(item => item.id)
                selection.forEach(item => {
                    if (!checkIds.includes(item.id)) { // 未被选中的数据标记为选中，并添加到已选数组中去
                        this.addCheck(item)
                    }
                })
            } else {
                this.addCheck(row)
            }
        },
        // 移除选中数据
        removeTag(selection, row){
            if(!row){ // 全选操作
                let checkIds = this.selectTagList.map(item => item.id)
                selection.forEach(item => {
                    if (checkIds.includes(item.id)) { // 未被选中的数据标记为选中，并添加到已选数组中去
                        this.removeCheck(item.id)
                    }
                })
            }else{
                this.removeCheck(row.id)
            }
        },
        // 添加选中的数据
        addCheck(obj) {
            if (this.multiple) { // 支持多选
                this.selectTagList.push(obj)
            } else {
                this.selectTagList = [obj]
            }
        },
        // 删除选中的数据
        removeCheck(id) {
            let index = this.selectTagList.findIndex(item => item.id === id)
            if (index !== -1) {
                this.selectTagList.splice(index, 1)
            }
        },
        // 打开抽屉，初始化数据
        showDrawer() {
            this.drawer.show = true
            this.$refs.assetTypeComponent.refreshQueryParams()
        },
        // 获取已选中的数据
        getCheckList(itemlist) {
            if (!itemlist.length) {
                return
            }
            this.selectTagList = itemlist
        },
    }
}
</script>

<style scoped>
.products-tag-select-drawer {
    width: 100%;
    height: 100%;
    position: relative;
}
.device-drawer /deep/ .ivu-page {
    text-align: center;
    margin-top: 10px;
}
.device-drawer /deep/ .ivu-drawer-body {
    overflow: auto !important;
}
.search {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    flex-wrap: wrap;
}
.search /deep/ .ivu-select,
.search /deep/ .ivu-input-wrapper,
.search /deep/ .ivu-date-picker,
.search /deep/ .ivu-btn,
.tag-group {
    margin-bottom: 10px;
}
.tag-group-1, .check-tab {
    display: flex;
    flex-wrap: wrap;
}
.tag-group-1 /deep/ .ivu-tag,
.check-tab /deep/ .ivu-tag {
    display: flex;
    justify-items: center;
    width: fit-content;
    max-width: 100%;
}
.tag-group-1 /deep/ .ivu-tag span,
.check-tab /deep/ .ivu-tag span {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tag-group-1 /deep/ .ivu-tag .ivu-icon-ios-close,
.check-tab /deep/ .ivu-tag .ivu-icon-ios-close {
    top: 5px
}
.search /deep/ .ivu-input,
.search /deep/ .ivu-select-selection,
.search /deep/ .ivu-select-selection:hover,
.search /deep/ .ivu-input:hover {
    border: 1px solid #dcdee2 !important;
}
.search /deep/ .ivu-select-visible .ivu-select-selection:focus,
.search /deep/ input:focus {
    box-shadow: 0 0 0 2px rgba(45, 140, 240, .2) !important;
}
.search /deep/ .ivu-input-icon,
.search /deep/ .ivu-select-arrow {
    color: #808695 !important;
}

.device-drawer /deep/ .ivu-drawer-mask,
.device-drawer /deep/ .ivu-drawer-wrap {
    position: fixed;
}
.check-tab {
    border: 1px solid #3a3ad1;
    border-radius: 5px;
    padding: 2px 6px;
    max-height: 200px;
    min-height: 32px;
    width: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;
}
.check-tab.not-multiple {
    height: 34px;
}
.check-tab:focus {
    box-shadow: 0 0 0 2px rgba(45, 140, 240, .2) !important;
}
.placeholder {
    color: silver;
    line-height: 28px;
}
.add-icon {
    position: absolute;
    right: 8px;
    top: 10px;
    cursor: pointer;
}
.check-tab {
    cursor: pointer;
}
.check-vulnerability {
    width: 100%;
    display: flex;
}
.check-vulnerability span {
    max-width: calc(100% - 70px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 6px;
}
</style>